<template>
  <ul>
    <card-load :isLoadShow="isLoadShow" contFont="正在查询中..."/>
    <li class="l-card"
    v-for="item in selfInfoData" :key="item.applyOrderId"
    :id="item.applyOrderId"
    @click="routerPush(item.applyOrderId)">
      <!--航班号与通过状态开始-->
      <header class="l-c-hr flex">

        <!--航班号开始-->
        <div>
          <span>航班号：</span>
          <span>{{item.flightNo}}</span>
        </div>
        <!--航班号结束-->

        <!--通过状态开始-->
        <div>
          <span :class="showColor(item.state)">{{item.state}}</span>
        </div>
        <!--通过状态结束-->

      </header>
      <!--航班号与通过状态结束-->
      <div class="l-c-div">
        <!--航班日期与申请人开始-->
        <div class="flex flex-margin l-c-color">

          <!--航班日期开始-->
          <div>
            <span>航班日期：</span>
            <span>{{item.lclDptDate | monthDate}}</span>
          </div>
          <!--航班日期结束-->

          <!--申请人开始-->
          <div>
            <span>申请人：</span>
            <span>{{item.paxName}}</span>
          </div>
          <!--申请人结束-->
        </div>
        <!--航班日期与申请人结束-->

        <!--航段和申请金额开始-->
        <div class="flex">

          <!--航段开始-->
          <div class="l-c-color">
            <span>航段：</span>
            <span>{{item.flightLine}}</span>
          </div>
          <!--航段结束-->

          <!--申请金额开始-->
          <div class="l-c-money">
            <span>申请金额：</span>
            <span>￥{{ parseFloat(item.applyAmount) | twoPoint}}</span>
          </div>
          <!--申请金额结束-->
        </div>
        <!--航段和申请金额结束-->
      </div>
    </li>
  </ul>
 </template>

<script>
import cardLoad from 'components/inquiry-laod/inquiry-laod'
export default {
  props: {
    selfInfoData: {
      type: Array
    }
  },
  data () {
    return {
      isLoadShow: false
    }
  },
  components: {
    cardLoad
  },
  methods: {
    showColor (state) {
      const stateMap = {
        '审核通过': 'l-c-by',
        '审核不通过': 'l-c-processing',
        '支付成功': 'l-c-success',
        '审核中': 'l-c-audit',
        '审核失败': 'l-c-Failed',
        '待审核': 'l-c-black',
        '支付失败': 'l-c-fail'
      }
      return stateMap[state]
    },
    routerPush (id) {
      const data = {
        url: '/api/3upsi_delay/dp/custApply/getApplyOrderDetails',
        userMsg: {
          'applyOrderId': id
        }
      }
      this.isLoadShow = true
      this._axios.postAxiosData(data)
        .then(res => {
          console.log(res.data)
          if (!res.data.state) {
            alert(res.data.msg)
            this.isLoadShow = false
          } else {
            this.$router.push({name: 'inquiryDateils', params: {myselfData: res.data}})
            sessionStorage.setItem('myInfoData', JSON.stringify(res.data))
          }
        })
        .catch(err => {
          console.log(err.data)
          alert('网络连接超时！')
          this.isLoadShow = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~assets/scss/public/public.scss';
@import '~assets/scss/public/var.scss';
@include flex(space-between, center);
.l-card:nth-of-type(1) {
  margin-top: $marginTop0;
}
.l-card {
  box-sizing: border-box;
  margin-top: .5rem;
  font-size: .8rem;
  background: $colorWhite;
  .l-c-div {
    padding: 0 .5rem .5rem;
  }
  .l-c-hr {
    border-bottom: .05rem solid $colorBorder;
    padding: .4rem .5rem;
  }
  .flex-margin {
    margin: .9rem auto;
  }
  .l-c-color {
    color: $colorGray;
  }
  .l-c-money {
    color: $colorBlack;
  }
  // 状态颜色
  .l-c-success {
    color: $colorSuccess;
  }
  .l-c-by {
    color: $colorBy;
  }
  .l-c-failure {
    color: $colorFailure;
  }
  .l-c-processing {
    color: $colorProcessing;
  }
  .l-c-Failed {
    color: $colorFailed;
  }
  .l-c-black {
    color: $colorBlack;
  }
  .l-c-fail {
    color: $colorFail;
  }
}
</style>
